/
<template>
    <div>
        <div v-if="showselect">
            <el-select :placeholder="mydataLabel" :style="{width: width}" clearable filterable @change="changevt" :disabled="optionflag == 0" remote :remote-method="filterMethodSqlSingle" ref="ddlSqlSingleSelect" v-model="value">
                <el-option v-for="(item,index) in options" :key="index" :label="item.display" :value="item.data">
                    <span style="float: left">{{ item.display }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.data }}</span>
                </el-option>
            </el-select>
        </div>
        <div v-else>
            <el-select v-model="TableRowValue" filterable remote :remote-method="filterMethodSqlSingle" placeholder="请选择" style="width:100%" clearable @clear="TableClear">
                <el-option :value="TableRowValue" :label="TableRowValue" style="padding:0;height:auto;width:100%;">
                    <div>
                        <el-table :data="options" style="width: 100%" @row-click="RowClick" highlight-current-row>
                            <el-table-column prop="data" label="代码" width="180">
                            </el-table-column>
                            <el-table-column prop="display" label="名称" width="180">
                            </el-table-column>
                            <el-table-column prop="inputcode" label="输入码">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-option>
            </el-select>
        </div>
    </div>
</template>
<script>
import XEUtils from "xe-utils";
export default {
    props: { width: { type: String }, value: { type: String }, sql: { type: String }, optionflag: { type: String }, showselect: { type: Boolean, default: true }, keyid: { type: String } },
    data() {
        return {
            mydataLabel: "请选择",
            SqlSingleoptions: [],
            options: [],
            TableRowValue: "",
            myvalue: this.value,
        };
    },
    computed: {},
    updated() {
        if (!this.showselect) {
            //是下拉表格
            let data = this.SqlSingleoptions.find((item) => item.data == this.myvalue);
            if (!!data) {
                this.TableRowValue = data.display;
            } else {
                this.TableRowValue = this.myvalue;
            }
        }
    },
    created() {
        this.loadAllData(); //初始化主列表
    },
    watch: {},
    mounted() {},
    methods: {
        loadAllData: function () {
            if (this.sql.toLowerCase().indexOf("select") > -1 && this.sql.toLowerCase().indexOf("from") > -1) {
                this.$tool
                    .request({
                        //url: "MNG/MNG1/MNG132",
                        url: "ucent/ddl",
                        method: "post",
                        data: {
                            action: "SqlSingleSelect",
                            sql: this.sql,
                        },
                    })
                    .then((res) => {
                        this.SqlSingleoptions = res;
                        this.options = res;
                    })
                    .catch((e) => {
                        console.log("error", e);
                    });
            } else {
                this.SqlSingleoptions = [];
                let data = this.sql.split("|");
                if (data.length > 0) {
                    data.forEach((item) => {
                        let code = item.split(" ")[0];
                        let name = item.substring(item.indexOf(" "));
                        let inputcode = this.$pub.CreateInputcode(name, this, 20);
                        this.SqlSingleoptions.push({ data: code, display: name, inputcode: inputcode });
                    });

                    this.options = XEUtils.clone(this.SqlSingleoptions, true);
                }
                if (this.sql.indexOf(" ") > -1) {
                }
            }
        },
        changevt: function (evt) {
            this.value = evt;
            this.$emit("change", evt, this.keyid);
            this.$emit("changeObj", {code:evt, name:'', row:"",keyid:this.keyid});
        },
        filterMethodSqlSingle(query) {
            if (query) {
                //val存在
                this.options = this.SqlSingleoptions.filter((item) => {
                    if (item.hasOwnProperty("inputcode")) {
                        if (!!~item.data.indexOf(query) || !!~item.display.indexOf(query) || (item.inputcode ? !!~item.inputcode.toUpperCase().indexOf(query.toUpperCase()) : false)) {
                            return true;
                        }
                    } else {
                        if (!!~item.data.indexOf(query) || !!~item.display.indexOf(query)) {
                            return true;
                        }
                    }
                });
            } else {
                //val为空时，还原数组
                this.options = this.SqlSingleoptions;
            }
        },
        RowClick(row, column, event) {
            this.TableRowValue = row.display;
            this.myvalue = row.data;
            this.$emit("change", row.data, this.keyid);
            this.$emit("changeObj", {code:row.data, name:'', row:"",keyid:this.keyid});
        },
        TableClear() {
            this.myvalue = "";
            this.$emit("change", "", this.keyid);
            this.$emit("changeObj", {code:"", name:'', row:"", keyid:this.keyid});
        },
    },
};
</script>
<style scoped>
.el-main {
    padding: 0;
}
</style>
